<script>
/**
 * @desc 联系人选择弹出层
 */

import { mapState, mapMutations, mapActions } from 'vuex'
import { navTo } from '@/utils'
import uncheckedIco from '@/assets/icons/unchecked.svg'
import checkedIco from '@/assets/icons/checked.svg'
import closeIco from '@/assets/icons/close.svg'
import editIco from '@/assets/icons/edit.svg'
import deleteIco from '@/assets/icons/delete.svg'

export default {
  name: 'package-select',
  props: {
    show: Boolean,
    handleClose: Function
  },
  data: () => ({ uncheckedIco, checkedIco, closeIco, editIco, deleteIco }),
  computed: { ...mapState('SignIn', ['travelers']), ...mapState('Order', ['userTravelerId']) },
  methods: {
    navTo,
    ...mapActions('SignIn', ['deleteTraveler']),
    ...mapMutations('Order', { setOrder: 'setState' }),
    handleCheck(id) {
      this.setOrder({ userTravelerId: id })
      this.handleClose()
    },
    handleDelete(id) {
      wx.showModal({
        title: '提示',
        content: '是否要删除该联系人?',
        success: res => {
          res.confirm && this.deleteTraveler(id)
        }
      })
    }
  }
}
</script>

<template>
  <div class="package-select" :class="{'show':show}">
    <div class="content-container" :class="{'show':show}">
      <div class="top-bar">
        <p class="title">选择联系人</p>
        <!-- <img :src="closeIco" class="close" @click="handleClose"> -->
        <span class="close" @click="handleClose">确定</span>
      </div>
      
      <scroll-view scroll-y class="traveler-list">
        <div class="travelers-container">
          <div
            v-for="v in travelers"
            :key="v.id"
            class="traveler"
          >
            <img :src="userTravelerId==v.id?checkedIco:uncheckedIco" class="check-icon" @click="handleCheck(v.id)">
            <div class="info"  @click="handleCheck(v.id)">
              <p class="name">{{v.name}}</p>
              <p class="phone">{{v.mobile}}</p>
            </div>
            <div class="ctrl-btn" @click="()=>navTo({name:'traveler-edit',query:{id:v.id}})">
              <img :src="editIco" class="icon">
              <span class="text">编辑</span>
            </div>
            <div class="ctrl-btn" @click="()=>handleDelete(v.id)">
              <img :src="deleteIco" class="icon">
              <span class="text">删除</span>
            </div>
          </div>
        </div>
        <button class="add-btn" @click="()=>navTo('traveler-add')">添加出行人</button>
      </scroll-view>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.package-select {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  transition: all 0.25s;
  visibility: hidden;
  opacity: 0;
  &.show {
    visibility: visible;
    opacity: 1;
  }

  .content-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90vh;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    overflow: scroll;
    transition: all 0.25s;
    transform: translateY(100%);
    &.show {
      transform: translateY(0);
    }
  }

  .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    border-bottom: 1px solid $border-color;
    color: $main-color;

    .close {
      width: 2em;
      // width: 30px;
      // height: 30px;
      padding: 20px;
    }
  }

  .traveler-list {
    flex: 1;
    overflow: scroll;
  }

  .traveler {
    display: flex;
    align-items: center;
    margin: 20px 10px 0;
    padding-bottom: 20px;
    font-size: 16px;
    &:not(:last-child) {
      border-bottom: 1px dashed $border-color;
    }

    .check-icon {
      width: 30px;
      height: 30px;
      margin-right: 10px;
    }

    .info {
      flex: 1;
    }
    .ctrl-btn {
      display: flex;
      align-items: center;
      margin-left: 20px;
      color: $gray-font-color;
      .icon {
        width: 20px;
        height: 20px;
        margin-right: 2px;
      }
    }
  }
}

.add-btn {
  margin: 10px;
  background-color: $main-color;
  color: #ffffff;
}
</style>
